<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="Content-Security-Policy" content="default-src %VSCODE_CSP%; base-uri 'none'; script-src %VSCODE_CSP% 'unsafe-inline'; style-src %VSCODE_CSP% 'unsafe-inline';">
        <link rel="stylesheet" href="%VSCODE_RES%/snippetview/snippetview.css">
    </head>
    <body>
        <div class="tab">
            <button class="tablinks active" onclick="openTab(event, 'Symbols')">Symbols</button>
            <button class="tablinks" onclick="openTab(event, 'TikZ')">TikZ</button>
        </div>

        <div id="Symbols" class="tabcontent">
            <div class="header">
                <input type="text" name="search" id="symbolsearch" placeholder="Search" oninput="mathSymbolSearch()" />
                <select onchange="mathSymbolSearch()"> </select>
            </div>

            <div class="grid"></div>
        </div>

        <div id="TikZ" class="tabcontent">
            <h3>General</h3>
            <div>
                <a class="cmd" data-snippet="\n\\coordinate (${1:id}) at ${2:position};" data-description="name a point X"
                    >\coordinate (X) at (3,5)</a
                >
                <a
                    class="cmd"
                    data-snippet="\n\\node[${4:options}] (${1:id}) at ${2:position} {${3:label}};"
                    data-description="place a node and name it X"
                    >\node (X) at (3,5) {}</a
                >
            </div>
            <h3>Coordinate Specifications</h3>
            <div>
                <a class="cmd" data-snippet="(${1:x}, ${2:y})" data-description="Cartesian coordinate">(x,y)</a>
                <a class="cmd" data-snippet="(${1:θ}:${2:r})" data-description="Polar coordinate">(θ:r)</a>
                <small>Using <span class="tt">calc</span> library</small>
                <a
                    class="cmd"
                    data-snippet="($ (${1:A}) + {sin(${2:θ})}*(${3:B}) $)"
                    data-description="coordinate calculations"
                    >($ (A) + {sin(60)}*(B) $)</a
                >
                <a class="cmd" data-snippet="($ (${1:A})!${2:r}!(${3:B}) $)" data-description="From (A) 25% to (B)"
                    >($ (A)!.25!(B) $)</a
                >
                <a
                    class="cmd"
                    data-snippet="($ (${1:A})!${3:r}!${4:θ}:(${2:B}) $)"
                    data-description="From (A) 3cm to (B) then rotate 30°"
                    >($ (A)!3cm!30:(B) $)</a
                >
                <a
                    class="cmd"
                    data-snippet="($ (${1:A})!(${2:B})!(${3:C}) $)"
                    data-description="Projection of (B) onto line (AC)"
                    >($ (A)!(B)!(C) $)</a
                >
                <small>Using <span class="tt">positioning</span> library</small>
                <a
                    class="cmd"
                    data-snippet="\n\\node[${3|above,below|} ${4|left,right|}=${2:dist} of ${1:node}${5|.north,.center,.south|} ${6|west,east|}] (${7:id}) {${8:label}};"
                    data-description="Position new node 1cm above existing anchor"
                    >\node[above=1cm of node.north]</a
                >
            </div>
            <h3>Paths</h3>
            <div>
                <svg>
                    <line x1="15%" y1="50%" x2="100%" y2="50%"
                        style="stroke-width: 0.8; shape-rendering: crispEdges;"/>
                </svg>
                <a class="cmd" data-snippet="\n\\${1|draw,path,fill,node|}[$4] (${2:A}) -- (${3:B});" data-description="line">\path (A) -- (B)</a>
                <a class="cmd" data-snippet=" -- (${1:C})" data-description="extend line">&emsp;&emsp;&emsp;&emsp;&thinsp;&#8202-- (C)</a>
                <a class="cmd" data-snippet=" -- cycle;" data-description="joint to start">&emsp;&emsp;&emsp;&emsp;&thinsp;&#8202-- cycle</a>
                <svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
                    <line x1="10" y1="100" x2="80" y2="15" style="stroke-width: 16; shape-rendering: crispEdges;"></line>
    				<line x1="180" y1="100" x2="110" y2="15" style="stroke-width: 16;shape-rendering: crispEdges;"></line>
                    <path d="M 10 100 Q 95 0 180 100" style="stroke-width:16;" fill="transparent"></path>
                </svg>
                <a class="cmd" data-snippet="\n\\${1|draw,path,fill,node|}[$6] (${2:A}) to[out=${4:θ}, in=${5:θ}] (${3:B});" data-description="line with tweaked entry and exit angles"
                    >\path (A) to[out=θ, in=θ] (B)</a>
                <svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
                    <line x1="95" y1="55" x2="95" y2="110" style="stroke-width: 16; shape-rendering: crispEdges;"/>
                    <path d="M 10 100 Q 95 0 180 100" style="stroke-width:16;" fill="transparent"/>
                </svg>
                <a class="cmd" data-snippet="\n\\${1|draw,path,fill,node|}[$6] (${2:A}) to[bend ${4|left,right|}=${5:θ}] (${3:B});" data-description="line with center displaced"
                    >\path (A) to[bend left=θ] (B)</a>
                <svg>
                    <rect
                        width="100%"
                        height="100%"

                        fill="none"
                        style="stroke-width:2"
                    />
                </svg>
                <a class="cmd" data-snippet="\n\\${1|draw,path,fill,node|}[$4] (${2:A}) rectangle (${3:B});" data-description="rectangle"
                    >\path (A) rectangle (B)</a
                >
                <svg>
                    <circle
                        cx="50%"
                        cy="50%"
                        r="45%"

                        fill="none"
                        style="stroke-width:1"
                    />
                </svg>
                <a class="cmd" data-snippet="\n\\${1|draw,path,fill,node|}[$4] (${2:A}) circle (${3:r});" data-description="circle"
                    >\path (A) circle (r)</a
                >
                <svg>
                    <ellipse cx="50%" cy="50%" rx="45%" ry="25%" fill="none" style="stroke-width:1;"></ellipse>
                </svg>
                <a
                    class="cmd"
                    data-snippet="\n\\${1|draw,path,fill,node|}[$4] (${2:center}) ellipse (${3:width} and ${4:height});"
                    data-description="ellipse"
                    >\path (A) ellipse (3 and 2)</a
                >
                <svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
                    <path d="M 10 80 Q 95 0 180 80" style="stroke-width:16;" fill="transparent"/>
                </svg>
                <a
                    class="cmd"
                    data-snippet="\n\\${1|draw,path,fill,node|}[$7] (${2:A}) arc(${4:θ1}:${5:θ2}:${6:r}) (${3:B});"
                    data-description="circular arc"
                    >\path (A) arc(θ1:θ2:r) (B)</a
                >
                <svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
                    <path d="M 10 80 Q 95 30 180 80" style="stroke-width:16;" fill="transparent"/>
                </svg>
                <a
                    class="cmd"
                    data-snippet="\n\\${1|draw,path,fill,node|}[$7] (${2:A}) arc(${4:θ1}:${5:θ2}:${6:r1} and ${7:r2}) (${3:B});"
                    data-description="elliptic arc"
                    >\path (A) arc(θ1:θ2:r1 and r2) (B)</a
                >
                <svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
                    <path d="M 10 80 Q 52.5 10, 95 80 T 180 80" style="stroke-width:16;" fill="transparent"/>
                </svg>
                <a
                    class="cmd"
                    data-snippet="\n\\${1|draw,path,fill,node|}[$7] (${2:A}) .. controls (${3:C1}) and (${4:C2}) .. (${3:B});"
                    data-description="Bezier curve"
                    >\path (A) .. controls (C1) and (C2) .. (B)</a
                >
                <svg>
                    <line x1="0%" y1="33%" x2="100%" y2="33%"
                        style="stroke-width: 1; shape-rendering: crispEdges;"/>
                    <line x1="0%" y1="67%" x2="100%" y2="67%"
                        style="stroke-width: 1; shape-rendering: crispEdges;"/>
                    <line y1="0%" x1="33%" y2="100%" x2="33%"
                        style="stroke-width: 1; shape-rendering: crispEdges;"/>
                    <line y1="0%" x1="67%" y2="100%" x2="67%"
                        style="stroke-width: 1; shape-rendering: crispEdges;"/>
                </svg>
                <a
                    class="cmd"
                    data-snippet="\n\\${1|draw,path,fill,node|}[${5:step=1}] (${2:A}) grid[$4] (${3:B});"
                    data-description="grid"
                    >\path (A) grid (B);</a
                >
                <!-- <a
                    class="cmd"
                    data-snippet="\n\\${1|draw,path,fill,node|}[$5] (${2:A}) parabola[$4] (${3:B});"
                    data-description="parabola"
                    >\path (A) parabola (B);</a
                > -->
            </div>
            <h3>Path Options</h3>
            <div>
                <div class="col3">
                    <svg>
                        <line x1="0%" y1="50%" x2="100%" y2="50%"
                            style="stroke-width: 0.4; shape-rendering: crispEdges;"/>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="ultra thin"
                    >ultra thin</a>
                    <svg>
                        <line x1="0%" y1="50%" x2="100%" y2="50%"
                            style="stroke-width: 0.6; shape-rendering: crispEdges;"/>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="very thin"
                    >very thin</a>
                    <svg>
                        <line x1="0%" y1="50%" x2="100%" y2="50%"
                            style="stroke-width: 0.8; shape-rendering: crispEdges;"/>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="thin"
                    >thin</a>
                    <svg>
                        <line x1="0%" y1="50%" x2="100%" y2="50%"
                            style="stroke-width: 1.0; shape-rendering: crispEdges;"/>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="semithick"
                    >semithick</a>
                    <svg>
                        <line x1="0%" y1="60%" x2="100%" y2="60%"
                            style="stroke-width: 2; shape-rendering: crispEdges;"/>
                        <line x1="0%" y1="40%" x2="100%" y2="40%"
                            style="stroke-width: 2; shape-rendering: crispEdges;"/>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="thick"
                    >thick</a>
                    <svg>
                        <line x1="0%" y1="50%" x2="100%" y2="50%"
                            style="stroke-width: 3; shape-rendering: crispEdges;"/>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="very thick"
                    >very thick</a>
                    <svg>
                        <line x1="0%" y1="50%" x2="100%" y2="50%"
                            style="stroke-width: 5; shape-rendering: crispEdges;"/>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="ultra thick"
                    >ultra thick</a>
                </div>
                <div class="col3 widesvg">
                        <svg>
                            <line x1="0%" y1="50%" x2="100%" y2="50%"
                                style="stroke-width: 1; shape-rendering: crispEdges;"/>
                        </svg>
                        <a
                        class="cmd"
                        data-snippet="solid"
                        >solid</a>
                        <svg>
                            <line x1="0%" y1="50%" x2="100%" y2="50%"
                                stroke-dasharray="6%,31%"  stroke-linecap="round"
                                style="stroke-width: 1; shape-rendering: crispEdges;"/>
                        </svg>
                        <a
                        class="cmd"
                        data-snippet="dotted"
                        >dotted</a>
                        <svg>
                            <line x1="0%" y1="50%" x2="100%" y2="50%"
                                stroke-dasharray="6%,17%"  stroke-linecap="round"
                                style="stroke-width: 1; shape-rendering: crispEdges;"/>
                        </svg>
                        <a
                        class="cmd"
                        data-snippet="densely dotted"
                        >densely dotted</a>
                        <svg>
                            <line x1="0%" y1="50%" x2="100%" y2="50%"
                                stroke-dasharray="6%,47%"  stroke-linecap="round"
                                style="stroke-width: 1; shape-rendering: crispEdges;"/>
                        </svg>
                        <a
                        class="cmd"
                        data-snippet="loosely dotted"
                        >loosely dotted</a>
                        <svg>
                                <line x1="0%" y1="50%" x2="100%" y2="50%"
                                stroke-dasharray="18%,32%"
                                style="stroke-width: 1; shape-rendering: crispEdges;"/>
                        </svg>
                        <a
                        class="cmd"
                        data-snippet="dashed"
                        >dashed</a>
                        <svg>
                            <line x1="0%" y1="50%" x2="100%" y2="50%"
                                stroke-dasharray="18%,18%"
                                style="stroke-width: 1; shape-rendering: crispEdges;"/>
                        </svg>
                        <a
                        class="cmd"
                        data-snippet="densely dashed"
                        >densely dashed</a>
                        <svg>
                            <line x1="0%" y1="50%" x2="100%" y2="50%"
                                stroke-dasharray="18%,82%"
                                style="stroke-width: 1; shape-rendering: crispEdges;"/>
                        </svg>
                        <a
                        class="cmd"
                        data-snippet="loosely dashed"
                        >loosely dashed</a>
                </div>
                <div class="col3 widesvg">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100">
                        <defs>
                            <marker id="arrowhead" markerWidth="5" markerHeight="4" refX="1" refY="2" orient="auto" fill="currentColor">
                            <polygon points="0 0, 5 2, 0 4, 2 3" style="shape-rendering: crispedges;"></polygon>
                            </marker>
                        </defs>
                        <line x1="0" y1="50" x2="250" y2="50" stroke="currentColor" stroke-width="24" marker-end="url(#arrowhead)"></line>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="-stealth"
                    >-stealth</a>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100">
                        <defs>
                            <marker id="arrowhead2" markerWidth="5" markerHeight="4" refX="1" refY="2" orient="auto" fill="currentColor">
                            <polygon points="0 0, 5 2, 0 4" style="shape-rendering: crispedges;"></polygon>
                            </marker>
                        </defs>
                        <line x1="0" y1="50" x2="250" y2="50" stroke="currentColor" stroke-width="24" marker-end="url(#arrowhead2)"></line>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="-latex"
                    >-latex</a>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100">
                        <defs>
                            <marker id="arrowhead3" markerWidth="5" markerHeight="5" refX="1" refY="2.5" orient="auto">
                                <line x1="5" y1="2.5" x2="0" y2="5" stroke="currentColor" stroke-width="1"></line>
                                <line x1="5" y1="2.5" x2="0" y2="0" stroke="currentColor" stroke-width="1"></line>
                                <line x1="5" y1="2.5" x2="0" y2="2.5" stroke="currentColor" stroke-width="1"></line>
                            </marker>
                        </defs>
                        <line x1="0" y1="50" x2="250" y2="50" stroke="currentColor" stroke-width="24" marker-end="url(#arrowhead3)"></line>
                    </svg>
                    <a
                    class="cmd"
                    data-snippet="-to"
                    >-to</a>
                </div>
            </div>
            <h3>Colour</h3>
            <div>
                <div class="col4">
                        <svg  viewBox="0 0 100 100">
                            <polygon points="0,0 100,0 0,100" fill="currentColor"/>
                            <rect
                                width="100%"
                                height="100%"
                                fill="none"
                                style="stroke-width:20"
                            />
                        </svg>
                        <a class="cmd" data-snippet="color=${1|red,green,blue,cyan,magenta,yellow,black,gray,darkgray,lightgray,brown,lime,olive,orange,pink,purple,teal,violet,white|}"
                            >color</a>
                </div>
                <div class="col4">
                        <svg>
                            <rect
                                width="100%"
                                height="100%"
                                fill="none"
                                style="stroke-width:2"
                            />
                        </svg>
                        <a class="cmd" data-snippet="draw=${1|red,green,blue,cyan,magenta,yellow,black,gray,darkgray,lightgray,brown,lime,olive,orange,pink,purple,teal,violet,white|}"
                            >draw color</a>
                </div>
                <div class="col4">
                    <svg>
                        <rect
                            width="100%"
                            height="100%"
                            fill="currentColor"
                            style="stroke-width:2"
                        />
                    </svg>
                    <a class="cmd" data-snippet="fill=${1|red,green,blue,cyan,magenta,yellow,black,gray,darkgray,lightgray,brown,lime,olive,orange,pink,purple,teal,violet,white|}"
                        >fill color</a>
                </div>
                <div class="col4">
                    <svg>
                        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                                <stop offset="0%" style="stop-color:currentColor;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:currentColor;stop-opacity:0" />
                        </linearGradient>
                        <rect
                            width="100%"
                            height="100%"
                            fill="url(#grad1)"
                            style="stroke-width:2"
                        />
                    </svg>
                    <a class="cmd" data-snippet="opacity=${1|0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9|}"
                        >opacity</a>
                </div>
            </div>
            <h3>Maths</h3>
            <div>
                <div class="col3">
                    <svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
                        <path d="M 10 60 Q 52.5 0, 95 90 T 180 80" style="stroke-width:16;" fill="transparent"/>
                        <line x1="0%" y1="50%" x2="100%" y2="50%"
                                style="stroke-width: 10; shape-rendering: crispEdges;"/>
                        <line x1="0%" y1="0%" x2="0%" y2="100%"
                                style="stroke-width: 16; shape-rendering: crispEdges;"/>
                    </svg>
                    <a class="cmd"
                    data-snippet="\n\\${1|draw,path,fill,node|}[$5] plot[$4] (${2:X(\\x)},${3:Y(\\x)});"
                        >Plot</a>
                </div>
                <div class="col3">
                    <a class="cmd"
                    data-snippet="\n\\pgfmath${1|set,truncate|}macro{\\${2:command}}{${3:expression}}"
                        >Set Value</a>
                </div>
                <div class="col3">
                    <a class="cmd"
                    data-snippet="\n\\pgfmathdeclarefunction{\\${1:command}}{${2:nargs}}{\\pgfmathparse{${3:expression}}}"
                        >Set Function</a>
                </div>
            </div>
        </div>

        <script> var mathSymbolsJsonUrl = '%VSCODE_RES%/snippetpanel/snippetpanel.json'; </script>
        <script src="%VSCODE_RES%/snippetview/snippetview.js"></script>
    </body>
</html>
